<template>
  <div class="mains">
    <div class="cat">
      <ul>
        <li><span>漫画分类</span></li>
        <li><span @click="Online" class="we">在线漫画</span></li>
        <li v-for="(c,index) in cat" @click="cats(c.id)">
          <span>
                {{c.name}}    
          </span>
        </li>
      </ul>
    </div>
    <div class="main">
      <ul>
        <li v-for="(l,index) in countList">
          <div>
            <div class="collect">
              <i class="fa fa-heart-o"></i>
            </div>
            <router-link :to="'/book/'+l.book">
              <img :src="'http://api.ishuhui.com/'+ l.thumb" alt="">
              <p>{{l.name}}</p>
            </router-link>
          </div>
          <!--'/details/'+book[0].id-->

          <p>
            <router-link :to="'/details/'+l.id">
              更新至:{{l.number}}话
            </router-link>
          </p>
          <p>{{l.title}}</p>
        </li>
      </ul>
    </div>

    <div class="page">
      <span @click="more">召唤更多</span>
    </div>
    <loading v-if="showLoading"></loading>
  </div>
</template>
<script>
  import loading from '../components/Loading'
  export default {
    props: ['murl', 'cat'],
    data() {
      return {
        countList: [],
        count: 0,
        totalPages: 0,
        pages: [],
        p: 1,
        id: "",
        show: false,
        rt: true,
        showLoading: true
      }
    },
    components: {
      loading
    },
    methods: {
      Online() {
        this.rt = true
        this.showLoading = true
        this.axios.get('http://api.ishuhui.com/cartoon/category_latest/ver/' + this.murl + '.json')
          .then(data => {
            // console.log(data)
            this.countList = data.data.data.data
            this.count = data.data.data.count
            this.totalPages = data.data.data.totalPages

            setTimeout(() => {
              this.showLoading = false
            }, 2000)

          })
          .catch(err => {
            console.log(err)
            setTimeout(() => {
              this.showLoading = false
            }, 2000)
          })
      },
      cats(val) {
        this.p = 1
        this.rt = false
        this.showLoading = true
        this.id = val
        this.axios.get('http://api.ishuhui.com/cartoon/category_latest/ver/' + this.murl + '/category/' + val + '.json')
          .then(data => {
            // console.log(data)
            this.countList = data.data.data.data
            this.count = data.data.data.count
            this.totalPages = data.data.data.totalPages
            setTimeout(() => {
              this.showLoading = false
            }, 1000)
          })
          .catch(err => {
            console.log(err)
            setTimeout(() => {
              this.showLoading = false
            }, 2000)
            
          })

      },
      getall() {
        if (this.p <= this.totalPages) {
          // this.showLoading = true
          this.axios.get('http://api.ishuhui.com/cartoon/category_latest/ver/' + this.murl + '/page/' + this.p +
              '.json')
            .then(data => {
              // console.log(data)
              this.countList = this.countList.concat(data.data.data.data)
              
            })
            .catch(err => {
              console.log(err)
             
            })
        } else {
          this.$notify.info({
            title: '没有了',
            message: '已经全部召唤过来了',
            offset: 100
          });
        }
      },
      getsome() {
        if (this.p <= this.totalPages) {
          this.axios.get('http://api.ishuhui.com/cartoon/category_latest/ver/' + this.murl + '/category/' + this.id +
              '/page/' + this.p + '.json')
            .then(data => {
              // console.log(data)
              this.countList = this.countList.concat(data.data.data.data)
              
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          this.$notify.info({
            title: '没有了',
            message: '已经全部召唤过来了',
            offset: 100
          });
        }
      },
      more() {
        this.p++

          if (this.rt) {
            this.getall()
          } else {
            this.getsome()
          }

      }

    },
    created() {
      this.showLoading = true
      let uid = localStorage.getItem('uil')
      this.axios.get('http://api.ishuhui.com/cartoon/category_latest/ver/' + uid + '.json')
        .then(data => {

          this.countList = data.data.data.data
          this.count = data.data.data.count
          this.totalPages = data.data.data.totalPages
          // console.log(this.countList)
          setTimeout(() => {
            this.showLoading = false
          }, 2000)
        })
        .catch(err => {
          console.log(err)
          setTimeout(() => {
            this.showLoading = false
          }, 2000)
        })
    },
    mounted(){
      // get http://api.ishuhui.com/index/rss/ver/73189130/rss/b2b30b41b50/limit/8.json
    }
  }

</script>
<style scoped>
  .cat {
    margin: 0;
  }
  
  .cat ul {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    min-width: 350px;
  }
  
  .cat li {
    float: left;
    text-align: center;
    padding: 15px 0px;
    white-space: nowrap;
  }
  
  .cat li span {
    display: inline-block;
    padding: 0 10px;
    text-align: center;
    border-right: 1px solid #ccc;
  }
  
  .cat li:nth-of-type(1) span,
  .cat li:last-child span {
    border: none;
  }
  
  .cat li:nth-of-type(1) {
    color: white;
    background-color: #fe330b;
  }
  
  .main {
    text-align: center;
    padding: 0 15px;
    overflow: hidden;
  }
  
  .main li {
    width: 27%;
    display: inline-block;
    vertical-align: middle;
    /*float: left;*/
    overflow: hidden;
    margin-right: 15px;
    margin-bottom: 15px;
  }
  
  .main li>div {
    width: 100%;
    position: relative;
  }
  
  .main p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .main li div p {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 5px 10px;
    color: white;
    text-align: right;
    background-color: rgba(0, 0, 0, .7);
  }
  
  .main li div img {
    width: 100%;
  }
  
  .main li>p {
    text-align: left;
  }
  
  .page {
    padding: 0 15px;
    text-align: center;
  }
  
  .page span {
    color: white;
    font-size: .5rem;
    padding: 5px 10px;
    /*border: 1px solid #ccc;*/
    border-radius: 10px;
    background-color: #ccc;
  }
  
  .now {
    background-color: #CCC;
  }
  .collect{
    position: absolute;
    right: 0;
    top: 0;
  }
  .collect i{
    color: white;
    padding: 5px;
    background-color: rgba(0, 0, 0, .7)
  }
</style>
